<template>
    <div class="content">
      <h1>500 错误页面</h1>
      <div class="error_content">
        <img src="../../assets/500.png" />
        <br /><br /><br />
        <h2>很抱歉, 您访问的页面不存在!</h2>
        <p>
          不知道您是怎么到这个页面来的，虽然页面暂时无法找到，别担心，您可以点击下面按钮返回上一页。
        </p>
        <a class="b-home" @click="back()">Return To Previous Page</a>
        <Countdown v-model="time" class="count"></Countdown>
      </div>
    </div>
</template>

<script>
import Countdown from '../Components/Countdown'
export default {
  components: {
    Countdown
  },
  props: {},
  data() {
    return {
      time:'5'
    };
  },
  methods: {
    back(){
      this.$_global.countDownFlag = false;
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 2em 0;
  font-family: "Raleway", sans-serif;
  background: #1389c0;
}

h1,
h2 {
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
}

img {
  width: 100%;
}

h1 {
  font-size: 80px;
  text-align: center;
  color: #fff;
  margin-bottom: 40px;
  letter-spacing: 5px;
}
h2 {
  font-size: 30px;
  text-transform: capitalize;
  margin: 0;
  color: #333;
}

p {
  margin: 0;
  color: #777;
  letter-spacing: 1px;
  line-height: 1.8em;
  font-size: 14px;
  font-weight: 400;
  margin: 2em 0;
}

.error_content img {
  width: 460px;
  height: 100px;
}

.error_content {
  padding: 8em 8em;
  background: #fff;
  width: 67%;
  margin: 0px auto;
}

.footer p {
  text-align: center;
  color: #eee;
  letter-spacing: 2px;
  font-size: 15px;
  margin: 3em 0 1em;
}
.footer p a {
  color: #eee;
}
form {
  width: 40%;
}

a.b-home {
  background: #1389c0;
  padding: 1em 1.5em;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: 0.9em;
  margin-top: 2em;
}
a.b-home:hover {
  background: #505152;
}

.count{
  margin-top: 15px;
}
</style>
